<style type="text/css">
    @media (orientation: landscape){
        .memberListTable{
            width: 50%;
            height: 100%;
            float: left;
        }
    }
    @media (orientation: portrait){
        .memberListTable{
            float: bottom;
            width: 100%;
            height: 50%;
        }
    }
    .box-wrap{
        width: 100%;
    }
</style>
<script type="text/javascript">
    var coopID;
    function setCoop(coopIDs,coopName){
        coopID=coopIDs;
        $('#coopName').html(coopName);
    }
    
    function memberList(){
        $.post('report/selectMember/memberList.php',{
            coopID: coopID,
            keyword: $('#keyword').val()
        },function(data){
            $('#memberList').html(data);
        });
    }
    
    function selectedList(){
        $.post('report/selectMember/selectedList.php',{
            keyword: $('#keyword').val()
        },function(data){
            $('#selectedList').html(data);
        });
    }
    
    function setMember(memID){
        $.post('report/selectMember/setMember.php',{
            memID: memID
        },function(data){
            memberList();
            selectedList();
        });
    }
    
    function unsetMember(memID){
        $.post('report/selectMember/unsetMember.php',{
            memID: memID
        },function(data){
            memberList();
            selectedList();
        });
    }
</script>
<table class="noSpacing memberListTable">
    <tr>
        <td style="padding: 5px;height: 100%;">
            <div class="box-wrap" style="display: table;margin-left: auto;margin-right: auto;height: 100%;overflow: hidden;padding-bottom: 5px">
                <table class="noSpacing" style="width: 100%;height: 100%;">
                    <tr>
                        <td style="height: 65px;">
                            <div class="box-heading">
                                <h4>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon glyphicon-search" aria-hidden="true"></span>
                                        </span>
                                        <input id="keyword" type="text" class="form-control" placeholder="ค้นหาเกษตร">
                                        <div class="input-group-btn">
                                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span id='coopName'>สังกัด</span> <span class="caret"></span></button>
                                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                                <li><a href="javascript:setCoop('','ทั้งหมด');memberList();">ทั้งหมด</a></li>
                                                <li class="divider"></li>
                                                <?php
                                                    $query="
                                                        select      *
                                                        from        coop_type
                                                        order by    coopName
                                                        ";
                                                    $result=$mysqli->query($query);
                                                    while($row=$result->fetch_array(MYSQLI_ASSOC)){
                                                        ?>
                                                <li><a href="javascript:setCoop('<?=$row["coopID"]?>','<?=$row["coopName"]?>');;memberList();"><?=$row["coopName"]?></a></li>
                                                            <?php
                                                    }
                                                ?>
                                            </ul>
                                        </div><!-- /btn-group -->
                                    </div><!-- /input-group -->
                                </h4>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 0px;">
                            <div id="memberList" class="box-inner" style="height: 100%;overflow: auto;padding: 0px 0px 0px 0px;"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>
<table class="noSpacing memberListTable">
    <tr>
        <td style="padding: 5px;height: 100%;">
            <div class="box-wrap" style="display: table;margin-left: auto;margin-right: auto;height: 100%;overflow: hidden;padding-bottom: 5px">
                <table class="noSpacing" style="width: 100%;height: 100%;">
                    <tr>
                        <td style="height: 53px;">
                            <div class="box-heading">
                                <h4>
                                    <div class="input-group input-group-normal">
                                        <span class="glyphicon glyphicon-user"></span>
                                        รายชื่อเกษตรกรที่เลือก
                                    </div>
                                </h4>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding: 0px;">
                            <div id="selectedList" class="box-inner" style="height: 100%;overflow: auto;padding: 0px;"></div>
                        </td>
                    </tr>
                </table>
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
    memberList();
    selectedList();
    $('#keyword').keyup(function(){
        memberList();
    })
</script>